<template>
  <div>
    <span @click="isShowFromLeft = !isShowFromLeft">togglePageFromLeftWithModal[mask]</span>
    <span @click="isShowFromRight = !isShowFromRight">togglePageFromRight</span>
    <span @click="isShowFromLeftWithPage = !isShowFromLeftWithPage">isShowFromLeftWithPage</span>
    <span @click="isShowFromRightWithPage = !isShowFromRightWithPage">togglePageFromRightWithPage</span>
    <!--<vm-popup v-model="isShowFromLeft" from="left" modal modal-lock>-->
      <!--<div @click="isShowFromLeft = false">closePage</div>-->
    <!--</vm-popup>-->
    <vm-popup v-model="isShowFromLeft" from="left" modal mask style="background: #f00">
      <div @click="isShowFromLeft = false">--- closePage ---</div>
    </vm-popup>
    <vm-popup v-model="isShowFromRight" from="right" style="background: #0f0">
      <div @click="isShowFromRight = false">--- closePage ---</div>
    </vm-popup>
    <vm-popup v-model="isShowFromLeftWithPage" from="left" page style="background: #00f">
      <div @click="isShowFromLeftWithPage = false">--- closePage ---</div>
    </vm-popup>
    <vm-popup v-model="isShowFromRightWithPage" from="right" page style="background: #0ff">
      <div @click="isShowFromRightWithPage = false">--- closePage ---</div>
    </vm-popup>

    <hr>

    <span @click="isShowFromTop = !isShowFromTop">togglePageFromTopWithModal[no mask]</span>
    <span @click="isShowFromBottom = !isShowFromBottom">togglePageFromBottom</span>
    <span @click="isShowFromTopWithPage = !isShowFromTopWithPage">isShowFromTopWithPage</span>
    <span @click="isShowFromBottomWithPage = !isShowFromBottomWithPage">togglePageFromBottomWithPage</span>
    <!--can set min-height   margin-top 等等，灵活使用，比如有header60高度，可这是margin-top: 60px-->
    <vm-popup v-model="isShowFromTop" from="top" modal style="background: #f00; min-height: 100px">
      <div @click="isShowFromTop = false">--- closePage ---</div>
    </vm-popup>
    <vm-popup v-model="isShowFromBottom" from="bottom" style="background: #0f0">
      <div @click="isShowFromBottom = false">--- closePage ---</div>
    </vm-popup>
    <vm-popup v-model="isShowFromTopWithPage" from="top" page style="background: #00f">
      <div @click="isShowFromTopWithPage = false">--- closePage ---</div>
    </vm-popup>
    <vm-popup v-model="isShowFromBottomWithPage" from="bottom" page style="background: #0ff">
      <div @click="isShowFromBottomWithPage = false">--- closePage ---</div>
    </vm-popup>
  </div>
</template>

<script>
  import '@/vmui/popup'
  export default {
    data () {
      return {
        isShowFromLeft: false,
        isShowFromRight: false,
        isShowFromLeftWithPage: false,
        isShowFromRightWithPage: false,
        isShowFromTop: false,
        isShowFromBottom: false,
        isShowFromTopWithPage: false,
        isShowFromBottomWithPage: false
      }
    }
  }
</script>
